<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全百科,法律法规</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="生产规范名称">
                            <el-input placeholder="请输入" class="inputW" v-model="ProductionSpecification"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="生产规范编号">-->
                            <!--<el-input placeholder="请输入" class="inputW" v-model="ProductionSpecificationNo"></el-input>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item label="类别">-->
                            <!--<el-select class="inputW" v-model="publishType">-->
                                <!--<el-option-->
                                        <!--v-for="item in DangerousData"-->
                                        <!--:key="item.Id"-->
                                        <!--:label="item.Name"-->
                                        <!--:value="item.Id">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addClick">新增</el-button>
                            <!--                            <el-button type="success" @click="search">导出模板</el-button>-->
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="600" :stripe="true" :border="true" size="mini" style="width: 100%;margin-bottom: 50px">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="ProductionSpecification" label="生产规范名称"></el-table-column>
                    <el-table-column prop="ProductionSpecificationNo" label="生产规范编号"></el-table-column>
                    <el-table-column prop="publishTime" label="发布日期">
                        <template slot-scope="scope" v-if="scope.row.publishTime">
                            <el-tag size="medium">{{scope.row.publishTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="executionTime" label="执行日期">
                        <template slot-scope="scope" v-if="scope.row.executionTime">
                            <el-tag size="medium">{{scope.row.executionTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="effectiveTime" label="生效日期">
                        <template slot-scope="scope" v-if="scope.row.effectiveTime">
                            <el-tag size="medium">{{scope.row.effectiveTime.replace("T"," ").substr(0,10)}}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="publishDepartment" label="发布部门"></el-table-column>
                    <el-table-column prop="publishTypeName" label="类别"></el-table-column>
                    <el-table-column prop="fileAlias" label="文件别名"></el-table-column>
                    <el-table-column prop="fileAlias" label="下载文件">
                        <template slot-scope="scope">
                            <el-button @click="report(scope.row.file)" size="small" type="primary">下载</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  v-if="roleId==1">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                            <el-button icon="el-icon-delete" round size="small"
                                       @click="delBtn(scope.row.Id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="'新增法律法规名录'" :visible.sync="addFormVisible">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="生产规范名称" :label-width="120" :rules="[
                             {required:true,message:'生产规范名称!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.ProductionSpecification" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="生产规范编号" :label-width="120" :rules="[
                             {required:true,message:'生产规范编号!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.ProductionSpecificationNo" autocomplete="off" class="itemW"></el-input>
                </el-form-item>

                <el-form-item label="发布日期" :label-width="120" :rules="[
                             {required:true,message:'发布日期!',trigger:'blur'}
                            ]">
                    <!--<el-input v-model="param.publishTime" autocomplete="off" class="itemW"></el-input>-->

                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="addForm.publishTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="执行日期" :label-width="120" :rules="[
                             {required:true,message:'执行日期!',trigger:'blur'}
                            ]">
                    <!--<el-input v-model="param.publishTime" autocomplete="off" class="itemW"></el-input>-->

                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="addForm.executionTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="生效日期" :label-width="120" :rules="[
                             {required:true,message:'生效日期!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="addForm.effectiveTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="发布部门" :label-width="120" :rules="[
                             {required:true,message:'发布部门!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.publishDepartment" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="类别" :label-width="120" :rules="[
                             {required:true,message:'类别!',trigger:'blur'}
                            ]">
                    <el-select v-model="addForm.publishType" style="width: 200px">
                        <el-option
                                v-for="item in DangerousData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件别名" :label-width="120" :rules="[
                             {required:true,message:'文件别名!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.fileAlias" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="文件上传*">
                    <el-upload
                            class="upload-demo"
                            drag
                            action="http://iot.hzcando.com/api/idm/v1/GovernmentRisk/SafeProductionAdd"
                            :headers="headers"
                            name="file"
                            :data="addForm"
                            :limit="1"
                            :auto-upload="false"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error = "onError"
                            ref="upload">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('addForm')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button @click="asubmitClick('upload')" style="margin-left: 40px;background-color: #f9b317;">提交
                </el-button>
            </div>
        </el-dialog>

        <el-dialog :title="'编辑法律法规名录'" :visible.sync="editFormVisible">
            <el-form ref="editForm" :model="editForm" label-width="80px">
                <el-form-item label="生产规范名称" :label-width="120" :rules="[
                             {required:true,message:'生产规范名称!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.ProductionSpecification" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="生产规范编号" :label-width="120" :rules="[
                             {required:true,message:'生产规范编号!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.ProductionSpecificationNo" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="发布日期" :label-width="120" :rules="[
                             {required:true,message:'发布日期!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editForm.publishTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="执行日期" :label-width="120" :rules="[
                             {required:true,message:'执行日期!',trigger:'blur'}
                            ]">
                    <!--<el-input v-model="editForm.publishTime" autocomplete="off" class="itemW"></el-input>-->

                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editForm.executionTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="生效日期" :label-width="120" :rules="[
                             {required:true,message:'生效日期!',trigger:'blur'}
                            ]">
                    <!--<el-input v-model="editForm.startTime" autocomplete="off" class="itemW"></el-input>-->

                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editForm.effectiveTime"
                                    placeholder="日期"
                                    class="itemW" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="发布部门" :label-width="120" :rules="[
                             {required:true,message:'发布部门!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.publishDepartment" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="类别" :label-width="120" :rules="[
                             {required:true,message:'类别!',trigger:'blur'}
                            ]">
                    <el-select v-model="editForm.publishType" style="width: 200px" @change="select_status">
                        <el-option
                                v-for="item in DangerousData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件别名" :label-width="120" :rules="[
                             {required:true,message:'文件别名!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.fileAlias" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="文件上传">
                    <el-upload
                            class="upload-demo"
                            drag
                            action="http://iot.hzcando.com/api/idm/v1/GovernmentRisk/SafeProductionUpdate"
                            :headers="headers"
                            name="file"
                            :data="editForm"
                            :limit="1"
                            :auto-upload="false"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error = "onError"
                            ref="upload">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('editForm')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button @click="esubmitClick('upload')" style="margin-left: 40px;background-color: #f9b317;">提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            fileList:[],
            param: {},
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            projectNo: '',
            riskName: '',
            registerNum: '',
            riskLevel: '',
            editMod: false,
            Chargerlist: [],
            lawName: '',
            publishDepartment: '',
            filetype: 0,
            addForm: {},
            editForm: {},
            addFormVisible: false,
            editFormVisible: false,
            DangerousData: [
                {Name: '所有', Id: ""},
                {Name: '煤矿', Id: 1},
                {Name: '化工', Id: 2},
                {Name: '建筑', Id: 3},
                {Name: '机械', Id: 4},
                {Name: '电力', Id: 5},
                {Name: '冶金', Id: 6},
                {Name: '消防', Id: 7},
                {Name: '交通', Id: 8},
                {Name: '石油', Id: 9},
                {Name: '特种设备', Id: 10},
                {Name: '职业卫生', Id: 11},
                {Name: '其它', Id: 12},
                {Name: '地方性', Id: 13},
                {Name: '国外', Id: 14},
            ],
            ProductionSpecification: '',
            ProductionSpecificationNo: '',
            publishType: '',
            headers: {
                uid: '',
                token: '',
            },
            roleId:SiteConfig.account.roleId
        },
        created: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            }
            $('.page').show();
            this.loadData();
        },
        methods: {
            select_status() {
                this.$forceUpdate();
            },
            report: function (filename) {
                if (!filename){
                    this.$message.warning('没有文件，无法下载');
                    return;
                }
                window.open(SiteConfig.webApiset + filename);
            },
            cancelClick(name) {
                switch (name) {
                    case 'addForm':
                        this.addForm = {};
                        this.addFormVisible = false;
                        break;
                    case 'editForm':
                        this.editFormVisible = false;
                        this.editForm = {};
                        break;
                }
            },
            addClick() {
                this.addFormVisible = true;
            },
            editClick(row) {
                this.editForm = {
                    Id:row.Id,
                    ProductionSpecification:row.ProductionSpecification,
                    ProductionSpecificationNo:row.ProductionSpecificationNo,
                    effectiveTime:row.effectiveTime,
                    executionTime:row.executionTime,
                    fileAlias:row.fileAlias,
                    publishDepartment:row.publishDepartment,
                    publishTime:row.publishTime,
                    publishType:row.publishType,
                };
                this.editForm.publishType = parseInt(row.publishType);
                this.editFormVisible = true;
            },
            loadData: function () {
                var param = {};
                if (this.ProductionSpecification)
                    param.ProductionSpecification = this.ProductionSpecification;
                if (this.ProductionSpecificationNo)
                    param.ProductionSpecificationNo = this.ProductionSpecificationNo;
                if (this.publishType)
                    param.publishType = this.publishType;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('GovernmentRisk/SafeProductionList', param).success((res) => {
                    var datalist = res.data;
                    for (var i = 0; i < datalist.length; i++) {
                        for (var j = 0; j < vuePage.DangerousData.length; j++) {
                            if (datalist[i].publishType == vuePage.DangerousData[j].Id) {
                                datalist[i].publishTypeName = vuePage.DangerousData[j].Name;
                            }
                        }
                    }
                    vuePage.tableData = datalist;
                    vuePage.totalCount = res.total;
                });
            },
            asubmitClick(name) {
                if (!this.addForm.ProductionSpecification) {
                    this.$message({type: 'error', message: '生产规范名称不能为空'})
                    return;
                }
                if (!this.addForm.ProductionSpecificationNo) {
                    this.$message({type: 'error', message: '生产规范编号不能为空'})
                    return;
                }
                if (!this.addForm.publishTime) {
                    this.$message({type: 'error', message: '发布日期不能为空'})
                    return;
                }
                if (!this.addForm.executionTime) {
                    this.$message({type: 'error', message: '执行日期不能为空'})
                    return;
                }
                if (!this.addForm.effectiveTime) {
                    this.$message({type: 'error', message: '生效日期不能为空'})
                    return;
                }
                if (!this.addForm.publishDepartment) {
                    this.$message({type: 'error', message: '发布部门不能为空'})
                    return;
                }
                if (!this.addForm.publishType) {
                    this.$message({type: 'error', message: '类别不能为空'})
                    return;
                }
                if (!this.addForm.fileAlias) {
                    this.$message({type: 'error', message: '文件别名不能为空'})
                    return;
                }
                if (this.fileList.length == 0) {
                    this.$message({
                        type: 'info',
                        message: '必须选择文件'
                    });
                    return;
                }
                this.addForm.projectNo = SiteConfig.account.projectNo;
                this.$refs[name].submit();

            },
            esubmitClick(name) {

                if (!this.editForm.ProductionSpecification) {
                    this.$message({type: 'error', message: '生产规范名称不能为空'})
                    return;
                }
                if (!this.editForm.ProductionSpecificationNo) {
                    this.$message({type: 'error', message: '生产规范编号不能为空'})
                    return;
                }
                if (!this.editForm.publishTime) {
                    this.$message({type: 'error', message: '发布日期不能为空'})
                    return;
                }
                if (!this.editForm.executionTime) {
                    this.$message({type: 'error', message: '执行日期不能为空'})
                    return;
                }
                if (!this.editForm.effectiveTime) {
                    this.$message({type: 'error', message: '生效日期不能为空'})
                    return;
                }
                if (!this.editForm.publishDepartment) {
                    this.$message({type: 'error', message: '发布部门不能为空'})
                    return;
                }
                if (!this.editForm.publishType) {
                    this.$message({type: 'error', message: '类别不能为空'})
                    return;
                }
                if (!this.editForm.fileAlias) {
                    this.$message({type: 'error', message: '文件别名不能为空'})
                    return;
                }

                if (this.fileList.length == 0){
                    HttpUtil.get('GovernmentRisk/SafeProductionUpdate',this.editForm).success((r)=>{
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                        this.fileList = [];
                        this.editFormVisible = false;
                        this.loadData();
                    })
                } else {
                    this.$refs[name].submit();
                }


            },
            delBtn: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    var p = {};
                    p.Id = id;
                    HttpUtil.get('GovernmentRisk/SafeProductionDelete', p).success((r) => {
                        if (r.state == 0) {
                            vuePage.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vuePage.loadData();
                        } else {
                            vuePage.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取删除'
                    });
                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.pageno = 1
                this.loadData();
            },
            onCheckbox: function (row) {
            },
            fileChange(file, fileList) {
                this.fileList = fileList;
            },
            onSuccess(res){
                if (res.state==0){
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    this.fileList = [];
                    this.addFormVisible = false;
                    this.editFormVisible = false;
                    this.loadData();
                }else {
                    this.$message({
                        type: 'error',
                        message:'报错!'+ res.errMsg
                    });
                }

            },
            onError(err){
                this.$message({
                    type: 'error',
                    message:'报错!'+ err.errMsg
                });
            },
        },
        mounted: function () {
        }
    });
</script>
</body>
</html>
